<template>
  <div class="container">
    <!-- 头部阴影 -->
    <div
      v-if="!isScreen"
      class="header_shadow"
      :style="{ height: config.isVertical ? '102px' : '135px' }"
    ></div>
    <!-- 头部 -->
    <div
      v-if="!isScreen"
      :class="[
        !config.isVertical
          ? 'header'
          : config.isFold
          ? 'header header1'
          : 'header header2',
      ]"
      :style="
        config.isWhiteTheme
          ? ''
          : 'box-shadow: 0 0.125rem 0.25rem rgba(15,20,34,.4);'
      "
    >
      <div class="left" v-if="!config.isVertical">
        <div class="aside-header_left">
          <!-- <el-image :src="user.siteLogo ? user.siteLogo : logo" class="logo"></el-image> -->
          <img :src="user.siteLogo ? user.siteLogo : logo" class="logo" />
          <div class="title">
            {{ user.siteName ? user.siteName : "精卫安" }}
          </div>
        </div>
        <!-- <div class="aside-header_right"
          v-if="!config.isVertical && (user.roleName == 'ORG_ADMIN' || user.roleName == 'INSTERALL_USER')">
          <el-dropdown placement="bottom-start">
            <span class="el-dropdown-link">
              {{ spacesManage.organizationInfo.orgName }}<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <div>
                <Tree ref="refTree" @toggleOrgId="toggleOrgId"></Tree>
              </div>
            </el-dropdown-menu>
          </el-dropdown>
        </div> -->
      </div>

      <!-- <div v-if="config.isVertical && (user.roleName == 'ORG_ADMIN' || user.roleName == 'INSTERALL_USER')" class="left">
        <el-dropdown style="cursor: pointer;" placement="bottom-start">
          <span class="el-dropdown-link">
            {{ spacesManage.organizationInfo.orgName }}<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <div>
              <Tree ref="refTree" @toggleOrgId="toggleOrgId"></Tree>
            </div>
          </el-dropdown-menu>
        </el-dropdown>
      </div> -->

      <div class="right">
        <div class="right_one">
          <el-tooltip
            class="item"
            effect="dark"
            :content="config.isVertical ? '顶部导航' : '侧面导航'"
            placement="bottom"
          >
            <i
              class="iconfont"
              :class="[
                config.isVertical ? 'shounadaohang_o' : 'zhediedaohang_o',
              ]"
              @click="onMenuType"
              style="font-size: 30px; cursor: pointer; color: #d8d9db"
              :style="{ color: config.isWhiteTheme ? '#333333' : '#d8d9db' }"
            ></i>
          </el-tooltip>

          <el-tooltip
            class="item"
            effect="dark"
            content="大屏"
            placement="bottom"
            v-if="
              user.roleName == 'TENANT_ADMIN' ||
              user.roleName == 'ORG_ADMIN' ||
              user.roleName == 'INSTERALL_USER' ||
              user.roleName == 'UNIT_ADMIN'
            "
          >
            <i
              class="iconfont daping"
              @click="onDaping"
              style="font-size: 25px; cursor: pointer; color: #d8d9db"
              :style="{ color: config.isWhiteTheme ? '#333333' : '#d8d9db' }"
            ></i>
          </el-tooltip>

          <!-- <el-badge :value="0" class="item">
            <el-tooltip
              class="item"
              effect="dark"
              content="消息通知"
              placement="bottom"
            >
              <i
                class="iconfont xiaoxizhongxin"
                @click="onMessage"
                style="font-size: 24px; cursor: pointer; color: #d8d9db"
                :style="{ color: config.isWhiteTheme ? '#333333' : '#d8d9db' }"
              ></i>
            </el-tooltip>
          </el-badge> -->

          <el-tooltip
            class="item"
            effect="dark"
            content="刷新页面"
            placement="bottom"
          >
            <el-image
              class="header-blackRefresh_img"
              :src="config.isWhiteTheme ? whiteRefresh : blackRefresh"
              @click="reFresh"
            ></el-image>
          </el-tooltip>
          <el-tooltip
            class="item"
            effect="dark"
            :content="fullScreenContent"
            placement="bottom"
          >
            <el-image
              class="header-blackFullScreen_img"
              :src="config.isWhiteTheme ? whiteFullScreen : blackFullScreen"
              @click="onFullScreen"
            ></el-image>
          </el-tooltip>
          <el-tooltip
            class="item"
            effect="dark"
            content="更换主题"
            placement="bottom"
          >
            <el-image
              class="header-blackTopic_img"
              :src="config.isWhiteTheme ? blackTopic : whiteTopic"
              @click="changeTopic"
            ></el-image>
          </el-tooltip>
          <!-- <el-tooltip class="item" effect="dark" content="退出账号" placement="bottom">
            <el-image class="header-blackQuit_img" :src="config.isWhiteTheme ? whiteQuit : blackQuit"
              @click="quitAccount"></el-image>
          </el-tooltip> -->
        </div>
        <div class="right_two">
          <div class="two_1">
            <div class="name">{{ user.userName }}</div>
            <!-- <div class="role">{{ user.roleName | roleNameTrans }}</div> -->
          </div>

          <el-dropdown @command="commandClick">
            <span class="el-dropdown-link">
              <el-image
                :src="src"
                v-if="user.avatar == 1"
                class="two_2"
              ></el-image>
              <el-image
                :src="src2"
                v-else-if="user.avatar == 2"
                class="two_2"
              ></el-image>
              <el-image
                :src="src3"
                v-else-if="user.avatar == 3"
                class="two_2"
              ></el-image>
              <el-image
                :src="src4"
                v-else-if="user.avatar == 4"
                class="two_2"
              ></el-image>
              <el-image
                :src="src5"
                v-else-if="user.avatar == 5"
                class="two_2"
              ></el-image>
              <el-image
                :src="src6"
                v-else-if="user.avatar == 6"
                class="two_2"
              ></el-image>
              <el-image :src="portrail" class="two_2" v-else></el-image>
            </span>

            <el-dropdown-menu
              slot="dropdown"
              class="custom-dropdown-menu"
              style="min-width: 280px; z-index: 9999"
            >
              <div class="menu-header">
                <div class="header-img">
                  <el-image
                    :src="src"
                    v-if="user.avatar == 1"
                    class="two_2"
                  ></el-image>
                  <el-image
                    :src="src2"
                    v-else-if="user.avatar == 2"
                    class="two_2"
                  ></el-image>
                  <el-image
                    :src="src3"
                    v-else-if="user.avatar == 3"
                    class="two_2"
                  ></el-image>
                  <el-image
                    :src="src4"
                    v-else-if="user.avatar == 4"
                    class="two_2"
                  ></el-image>
                  <el-image
                    :src="src5"
                    v-else-if="user.avatar == 5"
                    class="two_2"
                  ></el-image>
                  <el-image
                    :src="src6"
                    v-else-if="user.avatar == 6"
                    class="two_2"
                  ></el-image>
                  <el-image :src="portrail" class="two_2" v-else></el-image>
                </div>
                <div class="header-info">
                  <div class="info-name">
                    <div>{{ user.userName }}</div>
                    <div style="margin-left: 10px">
                      {{ user.roleDescription }}
                    </div>
                  </div>
                  <!-- <span class="info-role" v-if="
                    user.roleName == 'TENANT_ADMIN' ||
                    user.roleName == 'ORG_ADMIN' ||
                    user.roleName == 'INSTERALL_USER'
                  ">
                    {{ spacesManage.organizationInfo.orgName }}
                  </span> -->
                </div>
              </div>
              <el-dropdown-item command="personalCenter">
                <div class="menu-item">
                  <i class="iconfont icon7 icon"></i>
                  <span class="item-title">个人中心</span>
                </div>
              </el-dropdown-item>
              <!-- <el-dropdown-item command="updateUserInfo">
                <div class="menu-item">
                  <i class="iconfont el-icon-user icon"></i>
                  <span class="item-title">账号信息</span>
                </div>
              </el-dropdown-item>
              <el-dropdown-item command="updateMobile">
                <div class="menu-item">
                  <i class="iconfont el-icon-mobile-phone icon"></i>
                  <span class="item-title">修改手机号</span>
                </div>
              </el-dropdown-item>
              <el-dropdown-item command="updatePassword">
                <div class="menu-item">
                  <i class="iconfont zhongzhimima icon"></i>
                  <span class="item-title">修改密码</span>
                </div>
              </el-dropdown-item>
              <el-dropdown-item command="updateOrg">
                <div class="menu-item">
                  <i class="iconfont el-icon-refresh icon"></i>
                  <span class="item-title">切换机构</span>
                </div>
              </el-dropdown-item>
              <el-dropdown-item command="loginLog">
                <div class="menu-item">
                  <i class="iconfont el-icon-tickets icon"></i>
                  <span class="item-title">登录日志</span>
                </div>
              </el-dropdown-item> -->
              <!-- <el-dropdown-item command="onzhuxiao" v-if="user.roleName != 'SUPER_ADMIN' && user.roleName != 'PLATFORM_ADMIN'">
                <div class="menu-item">
                  <el-tooltip effect="dark" placement="top">
                    <div slot="content">1、注销请慎重，操作不可逆
                    </div>
                    <div>
                      <i class="iconfont zhuxiao icon"></i>
                      <span class="item-title">注销</span>
                    </div>
                  </el-tooltip>
                </div>
              </el-dropdown-item> -->
              <el-dropdown-item command="exit">
                <div class="menu-exit">退出账号</div>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>

          <!-- <el-image :src="portrail" class="two_2"></el-image> -->
        </div>
      </div>
    </div>
    <!-- 内容区 -->
    <div
      v-if="!isScreen"
      :class="[
        !config.isVertical
          ? 'main'
          : config.isFold
          ? 'main main1'
          : 'main main2',
      ]"
      :style="flag ? 'box-shadow:none;' : ''"
    >
      <transition :name="animationName" mode="out-in">
        <keep-alive :include="tabList">
          <!-- <router-view></router-view> -->
          <router-view :key="$route.path" />
        </keep-alive>
      </transition>
    </div>
    <div v-else class="main_screen">
      <transition :name="animationName" mode="out-in">
        <keep-alive :include="tabList">
          <!-- <router-view></router-view> -->
          <router-view :key="$route.path" />
        </keep-alive>
      </transition>
    </div>
    <!-- 地图 -->
    <div class="mapLoc" v-if="isShowMap">
      <iframe
        :src="reqUrl"
        v-if="isShowMap"
        frameborder="0"
        class="iframe"
        seamless
        scrolling="no"
      ></iframe>
    </div>
    <!-- 侧边导航 -->
    <div
      class="aside"
      id="aside"
      v-if="config.isVertical && !isScreen"
      :style="
        config.isWhiteTheme
          ? ''
          : 'box-shadow: 0 0.125rem 0.25rem rgba(15,20,34,.4);'
      "
    >
      <Menu></Menu>
    </div>
    <!-- 顶部导航 -->
    <div class="middle" v-if="!config.isVertical && !isScreen">
      <horizontalMenu ref="refHorizontalMenu"></horizontalMenu>
    </div>
    <!-- tab标签展示 -->
    <div
      class="tabs"
      v-if="!isScreen"
      :class="[
        !config.isVertical
          ? 'tabs'
          : config.isFold
          ? 'tabs tabs1'
          : 'tabs tabs2',
      ]"
    >
      <tabs></tabs>
    </div>

    <!-- 消息通知 -->
    <messageNotify ref="refMessageNotify"></messageNotify>

    <!-- 右上角编辑信息 -->
    <userInfo ref="refUserInfo"></userInfo>
    <updateMobile ref="refMobile"></updateMobile>
    <updatePassword ref="refPassword"></updatePassword>
    <loginLog ref="refLogLogin"></loginLog>
    <updateOrg ref="refupdateOrg"></updateOrg>
    <!-- 个人中心 -->
    <personalCenter ref="refpersonalCenter"></personalCenter>
  </div>
</template>

<script>
import { setTheme } from "@theme/theme";
import screenfull from "screenfull";
import Menu from "@components/menu";
import horizontalMenu from "@components/horizontalMenu";
import messageNotify from "@components/messageNotify";
import { mapMutations, mapState } from "vuex";
import {
  reqLogout,
  reqGetById,
  reqOrgList,
  reqCancel,
  reqOrgCustomById,
  reqOrgByUserId,
} from "@api/api.js";
import tabs from "@components/Tab";
import Tree from "./components/Unit.vue";

// 个人中心操作
import loginLog from "@components/personnalCenter/loginLog.vue";
import updateMobile from "@components/personnalCenter/updateMobile.vue";
import updateOrg from "@components/personnalCenter/updateOrg.vue";
import updatePassword from "@components/personnalCenter/updatePassword.vue";
import userInfo from "@components/personnalCenter/userInfo.vue";
import personalCenter from "@components/personnalCenter/personalCenter.vue";

export default {
  components: {
    Menu,
    horizontalMenu,
    messageNotify,
    tabs,
    Tree,
    userInfo,
    personalCenter,
    updateMobile,
    updatePassword,
    loginLog,
    updateOrg,
  },
  data() {
    return {
      animationName: "fade-transform", // 默认使用动画
      titleImg: require("@assets/images/titleImg.png"),
      whiteQuit: require("@assets/images/whiteQuit.png"),
      blackQuit: require("@assets/images/blackQuit.png"),
      blackFullScreen: require("@assets/images/blackConfirmFullScreen.png"),
      whiteFullScreen: require("@assets/images/whiteConfirmFullScreen.png"),
      whiteRefresh: require("@assets/images/whiteRefresh.png"),
      blackRefresh: require("@assets/images/blackRefresh.png"),
      whiteTopic: require("@assets/images/whiteTopic.png"),
      blackTopic: require("@assets/images/blackTopic.png"),
      // portrail: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
      portrail: require("@assets/images/portrait.png"),
      src: require("@assets/images/touxiang1.png"),
      src2: require("@assets/images/touxiang2.png"),
      src3: require("@assets/images/touxiang3.png"),
      src4: require("@assets/images/touxiang4.png"),
      src5: require("@assets/images/touxiang5.png"),
      src6: require("@assets/images/touxiang6.png"),
      logo: require("@assets/images/logo4.png"),
      isFullscreen: false,
      fullScreenContent: "全屏",
      reqUrl:
        "https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=44FBZ-OVKKP-T23D5-VGHUE-XDXC3-BDF53&referer=精卫安管理系统&policy=1",
      isScreen: false, //是否全屏展示组件  数据中心用
      flag: false, //是否去除背景阴影
    };
  },
  computed: {
    ...mapState(["config", "user", "spacesManage"]), //系统配置项
    isShowMap() {
      return this.$store.state.isShowMap;
    },
    tabList() {
      let tablist = [];
      for (let item of this.$store.state.menu.tabList) {
        if (item.value != "task") {
          // 任务管理页面需要单独处理，相关页面跳转的时候要携带组织机构id，在生命周期created获取
          tablist.push(item.value);
        }
      }
      // console.log(tablist.join(","));
      return tablist.join(",");
    },
  },
  watch: {
    $route(to) {
      // console.log(to.path);
      if (
        to.path == "/alarm/list" ||
        to.path == "/message/voice" ||
        to.path == "/message/service" ||
        to.path == "/device/list" ||
        to.path == "/alarmDetails/list" ||
        to.path == "/mountPointsDefine/list" ||
        to.path == "/personal/list"
      ) {
        this.flag = true;
      } else {
        this.flag = false;
      }
      if (
        to.path == "/datav" ||
        to.path == "/building/details" ||
        to.path == "/video/surveillance" ||
        to.path == "/mainframe"
      ) {
        this.animationName = null; // 设置动画名为空，不应用动画
      } else {
        // 其他路由使用默认动画
        this.animationName = "fade-transform";
      }
      // if(to.path=='/org/list' && this.config.flagDatav){
      //   console.log(12312321);
      //   location.reload();
      // }
      this.getCurrentPath(to.path);
    },
    "user.siteName"(e) {
      // console.log(e);
      if (e == "") {
        document.title = "精卫安";
      } else {
        document.title = e;
      }
    },
    "user.siteLogo"(e) {
      // console.log(e);
      if (e == "") {
        var link = document.querySelector("link[rel*='icon']");
        link.href = "data:;base64,="; //修改浏览器logo
      } else {
        var link = document.querySelector("link[rel*='icon']");
        link.href = this.user.siteLogo; //修改浏览器logo
      }
    },
    "config.flagDatav"(e) {
      console.log(e);
      // location.reload();
    },
  },
  mounted() {},
  async created() {
    this.getCurrentPath(window.location.pathname);
    this.init();
    if (this.user.roleName == "TENANT_ADMIN") {
      // 刷新获取站点名称，站点logo
      const res = await reqGetById(this.user.tenantId);
      // console.log(res);
      this.saveSiteName(res.data.row.siteName || ""); //站点名称
      this.saveSiteLogo(res.data.row.siteLogo || ""); //站点logo
      this.saveDataVLogo(res.data.row.dataVLogo || ""); //大屏logo
    } else if (
      this.user.roleName == "ORG_ADMIN" ||
      this.user.roleName == "UNIT_ADMIN"
    ) {
      // 刷新获取站点名称，站点logo
      this.getOrgByUserId();
    }
  },
  inject: ["reload"], //局部刷新
  methods: {
    ...mapMutations([
      "saveIsVertical",
      "saveIsWhiteTheme",
      "saveSiteName",
      "saveSiteLogo",
      "saveDataVLogo",
      "selectMenu",
    ]),
    // 获取用户所在机构
    async getOrgByUserId() {
      const res = await reqOrgByUserId(this.user.userId);
      if (res.code !== 20000) {
        this.$modal.notifyWarning(res.message);
        return;
      }
      this.orgInfo = res.data.rows[0];
      this.getOrgCustomInfo(res.data.rows[0].id);
    },

    async getOrgCustomInfo(orgId) {
      const res = await reqOrgCustomById(orgId);
      this.saveSiteName(res.data.row.customName || ""); //站点名称
      this.saveSiteLogo(res.data.row.customLogo || ""); //站点logo
      this.saveDataVLogo(res.data.row.customVLogo || ""); //站点logo
    },
    // 切换单位
    toggleOrgId(data) {
      // console.log(data);
      //  if (data.orgId == "") {
      //    this.dataList = [];
      //    this.total = 0;
      //    return;
      //  }
      //  this.orgId = data.orgId;
      //  this.orgName = data.orgName;
      //  this.role = data.role; //role==1为管理员
      //  this.getDataList();
    },
    // 获取当前路径
    // 动态更换浏览器title
    getCurrentPath(path) {
      // console.log(path);
      if (
        path == "/alarm/list" ||
        path == "/message/voice" ||
        path == "/message/service" ||
        path == "/device/list" ||
        path == "/alarmDetails/list" ||
        path == "/mountPointsDefine/list" ||
        path == "/personal/list"
      ) {
        this.flag = true;
      } else {
        this.flag = false;
      }
      if (
        path === "/datav" ||
        path === "/building/details" ||
        path === "/video/surveillance" ||
        path === "/mainframe" ||
        path === "/fire/controlRoom/datav"
      ) {
        document.title = this.user.siteName ? this.user.siteName : "精卫安";
        this.isScreen = true;
      } else {
        this.isScreen = false;
        document.title = this.user.siteName ? this.user.siteName : "精卫安";
      }
      if (this.user.siteLogo != "") {
        var link = document.querySelector("link[rel*='icon']");
        link.href = this.user.siteLogo; //修改浏览器logo
      }
    },
    async commandClick(command) {
      // if (command == "updatePassword") {
      //   this.$router.replace("/personal/list");
      //   this.selectMenu({
      //     name: "个人中心",
      //     url: "/personal/list",
      //     value: "personal",
      //   });
      // }
      if (command == "personalCenter") {
        this.$refs.refpersonalCenter.dialogVisible = true;
      } else if (command == "updateUserInfo") {
        this.$refs.refUserInfo.dialogVisible = true;
      } else if (command == "updateMobile") {
        this.$refs.refMobile.dialogVisible = true;
      } else if (command == "updatePassword") {
        this.$refs.refPassword.dialogVisible = true;
      } else if (command == "updateOrg") {
        var res = await reqOrgList({
          userId: this.user.userId,
          roleName: this.user.roleName,
          tenantId: this.user.tenantId,
          orgName: "",
          parentId: "",
        });
        if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
        let { rows } = res.data;
        // console.log(rows, "res");
        if (rows.length == 1)
          return this.$modal.notifyWarning(
            "当前账号只存在一个组织机构，无法切换"
          );
        // this.dataList = transTree(rows);
        // console.log(this.dataList);
        this.$refs.refupdateOrg.dialogVisible = true;
      } else if (command == "loginLog") {
        this.$refs.refLogLogin.dialogVisible = true;
      } else if (command == "exit") {
        this.$confirm("确定要退出账号吗?", "温馨提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(async () => {
            const res = await reqLogout({ id: this.user.userId });
            var link = document.querySelector("link[rel*='icon']");
            link.href = "data:;base64,="; //修改浏览器logo
            sessionStorage.clear();
            this.$router.push("/login");
            window.location.reload(); //页面重新加载一次即可清空vuex
          })
          .catch(() => {});
      } else if (command == "onzhuxiao") {
        this.$confirm("确定要注销账号吗?", "温馨提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(async () => {
            const res = await reqCancel();
            if (res.code !== 20000)
              return this.$modal.notifyWarning(res.message);
            var link = document.querySelector("link[rel*='icon']");
            link.href = "data:;base64,="; //修改浏览器logo
            sessionStorage.clear();
            this.$router.push("/login");
            window.location.reload(); //页面重新加载一次即可清空vuex
          })
          .catch(() => {});
      }
    },
    onMenuType() {
      // 切换导航方式
      this.saveIsVertical(!this.config.isVertical);
    },
    onMessage() {
      // 消息弹出层
      this.$refs.refMessageNotify.drawer = true;
    },
    // 跳转大屏
    onDaping() {
      // this.$router.push("/datav");
      this.$router.replace("/datav");
      // let routeUrl = this.$router.resolve({
      //   path: "/datav",
      //   params: { id: 96 }
      // });
      // window.open(routeUrl.href, '_search');//_search || _blank
    },
    changeTopic() {
      this.saveIsWhiteTheme(!this.config.isWhiteTheme);
      if (this.config.isWhiteTheme) {
        setTheme("white");
      } else {
        setTheme("dark");
      }
    },
    // 刷新
    reFresh() {
      // location.reload();//全局刷新
      this.reload(); //局部刷新
    },
    init() {
      if (this.config.isWhiteTheme) {
        setTheme("white");
      } else {
        setTheme("dark");
      }
      if (screenfull.isEnabled) {
        screenfull.on("change", this.change);
      }
    },

    // 全屏
    onFullScreen() {
      // if (!screenfull.isEnabled) {
      //   this.$modal.notifyWarning("你的浏览器不支持全屏");
      //   return false;
      // }
      screenfull.toggle();
    },
    change() {
      this.isFullscreen = screenfull.isFullscreen;
      if (screenfull.isFullscreen) {
        this.fullScreenContent = "退出全屏";
        this.myIcon = "iconfont icon-pingmusuoxiao";
        this.blackFullScreen = require("@assets/images/blackCancelFullScreen.png");
        this.whiteFullScreen = require("@assets/images/whiteCancelFullScreen.png");
      } else {
        this.fullScreenContent = "全屏";
        this.myIcon = "iconfont icon-quanping";
        this.blackFullScreen = require("@assets/images/blackConfirmFullScreen.png");
        this.whiteFullScreen = require("@assets/images/whiteConfirmFullScreen.png");
      }
    },

    // 退出
    quitAccount() {
      this.$confirm("确定要退出账号吗?", "温馨提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          sessionStorage.clear();
          this.$router.push("/login");
          window.location.reload(); //页面重新加载一次即可清空vuex
        })
        .catch(() => {});
    },
  },
};
</script>

<style scoped lang="less">
@import url("./common.less");
@import url("./index.less");

.menu-header {
  display: flex;
  align-items: center;
  padding: 5px 0 0 20px;
  margin-bottom: 10px;

  .header-img {
    width: 40px;
    height: 40px;

    .two_2 {
      border-radius: 50%;
    }
  }

  .header-info {
    margin-left: 20px;

    .info-name {
      font-weight: 600;
      color: @primaryThemeTxtColor;
      display: flex;
      align-items: center;
      margin-bottom: 2px;
      font-size: 15px;
    }

    .info-role {
      font-size: 13px;
      padding: 2px 8px;
      box-sizing: border-box;
      border-radius: 4px;
      background: @primaryBgcolor11;
      color: #6e6b7b;
    }
  }
}

.menu-item {
  // margin-bottom: 10px;
  margin-bottom: 6px;
  color: @primaryThemeTxtColor;
  background: @primarydropdownItemBgcolor;
  border-radius: 6px;

  .icon {
    margin: 0 10px;
  }

  &:hover {
    // opacity: 0.8;
    background: @primarydropdownItemBgHover !important;
  }
}

.menu-exit {
  background: #ff4c51;
  color: #fff;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
  margin-bottom: 16px;

  &:hover {
    background: #e64449;
  }
}

.el-dropdown-menu {
  background: @primarydropdownMenuBgcolor !important;
  border: none !important;
  // #3a3e54
}

::v-deep .popper__arrow::after {
  border-bottom-color: @primarydropdownMenuBgcolor !important;
}

.el-dropdown-menu__item:hover {
  background-color: transparent !important;
  /* 修改鼠标移入时的背景色 */
}
</style>
